<!-- served from your routes in server.js -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Notion internal integration example" />

    <title>Notion integration demo</title>
    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="/style.css" />

    <!-- import the webpage's client-side javascript file -->
    <script src="/client.js" defer></script>
  </head>
  <body>
    <header>
      <h1>Notion internal integration demo</h1>
    </header>

    <main>
      <h2>Goals</h2>
      <p>
        Use this demo to see how to incorporate Notion's public API into your
        app. Build on this demo as needed to meet your own app's requirements!
      </p>
      <p>
        Open the Notion page set in your environment variables to see workspace
        updates in real-time. :)
      </p>
      <table>
        <tr>
          <th>Step</th>
          <th>Response</th>
        </tr>
        <tr>
          <td>
            <h3>1. Create a new database</h3>
            <form id="databaseForm">
              <label for="dbName">Database name</label>
              <input type="text" id="dbName" />
              <input type="submit" />
            </form>
          </td>
          <!-- The database form response will be appended here after submitting it -->
          <td id="dbResponse"></td>
        </tr>
        <tr>
          <td>
            <h3>2. Add a page to the database</h3>
            <form id="pageForm">
              <label for="newPageDB">Data Source ID (from step 1)</label>
              <input
                type="text"
                id="newPageDB"
                placeholder="Use the Data Source ID from above"
              />
              <label for="newPageName">New page name</label>
              <input type="text" id="newPageName" />
              <label for="header">Header 1</label>
              <input type="text" id="header" />
              <input type="submit" />
            </form>
          </td>
          <!-- The page form response will be appended here after submitting it -->
          <td id="pageResponse"></td>
        </tr>
        <tr>
          <td>
            <h3>3. Add content to the page</h3>
            <form id="blocksForm">
              <label for="pageID">Page ID</label>
              <input type="text" id="pageID" />
              <label for="content">Content</label>
              <input type="text" id="content" />
              <input type="submit" />
            </form>
          </td>
          <!-- The page content/blocks form response will be appended here after submitting it -->
          <td id="blocksResponse"></td>
        </tr>
        <tr>
          <td>
            <h3>4. Add a comment to the content</h3>
            <form id="commentForm">
              <label for="pageIDComment">Page ID</label>
              <input type="text" id="pageIDComment" />
              <label for="comment">Comment</label>
              <input type="text" id="comment" />
              <input type="submit" />
            </form>
          </td>
          <!-- The comment form response will be appended here after submitting it -->
          <td id="commentResponse"></td>
        </tr>
      </table>
    </main>
  </body>
</html>
